<template>
  <van-swipe class="home-grid">
    <van-swipe-item v-for="(gird, index) in formatterList" :key="index">
      <van-grid :column-num="5" :border="false">
        <van-grid-item v-for="item in gird" :key="item.id" class="van-ellipsis" :icon="item.imgUrl" :text="item.title" :to="item.path">
          <van-image width="48" height="48" lazy-load :src="item.imgUrl" />
          <div class="van-grid-item__text" style="padding-top: 8px;">{{ item.title }}</div>
        </van-grid-item>
      </van-grid>
    </van-swipe-item>
  </van-swipe>
</template>

<script>
import { Swipe, SwipeItem, Grid, GridItem } from 'vant'
export default {
  name: 'HomeGrid',
  components: {
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Grid.name]: Grid,
    [GridItem.name]: GridItem
  },
  props: {
    list: {
      type: Array,
      default() {
        return []
      }
    }
  },
  computed: {
    // 格式化宫格数据
    formatterList() {
      // 宫格每页最多只能放10个，将后台返回数据以10为单位分割 [[{},{}],[{},{}]]
      const listLength = this.list.length // 数组长度
      const num = 10 // 每页显示 10 条
      let index = 0
      const grids = []
      for (let i = 0; i < listLength; i++) {
        if (i % num === 0 && i !== 0) {
          // 可以被 10 整除
          grids.push(this.list.slice(index, i))
          index = i
        }
        if (i + 1 === listLength) {
          grids.push(this.list.slice(index, i + 1))
        }
      }
      return grids
    }
  }
}
</script>

<style scoped lang="less">
.home-grid {
  background: @white;
  // 图标
  /deep/ .van-grid-item__icon {
    font-size: 48px;
  }
  /deep/ .van-grid-item__content {
    padding: @padding-15 @padding-md 0;
  }
  // 文字
  /deep/ .van-grid-item__text {
    color: @text-color;
    font-size: @font-size-13;
    font-weight: @font-weight-bold;
    line-height: 1;
  }
}
</style>
